<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="site" :placeholder="$t('message.select')">
            <el-option
              v-for="(item, idx) in siteList"
              :key="idx"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="to"
            :start-placeholder="$t('start-time')"
            :end-placeholder="$t('end-time')">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="commitData">{{$t('message.confirm')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="totalVisible">{{$t('message.tot')}}</el-checkbox>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col v-if="totalVisible" :span="24" class="toolbar" style="padding: 0;" v-loading="tableDataLoading">
      <!--<table class="detailTable detailTable2" border="1" >-->
        <!--<tr v-for="k in Math.ceil(tot.length / 3)" :key="k">-->
          <!--<template v-for="(item, idx) in tot.slice(k, k+3)">-->
            <!--<td :key="idx">{{idx}}</td>-->
            <!--<td :key="idx">{{item}}</td>-->
          <!--</template>-->
        <!--</tr>-->
      <!--</table>-->
      <!--<ul class="totalPl">-->
        <!--<li class="item" v-for="(item, idx) in totV" :key="idx">-->
          <!--<p>{{totKey[idx]}}</p>-->
          <!--<p>{{item}}</p>-->
        <!--</li>-->
      <!--</ul>-->
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基础货币收益</span>
            </div>
            <div v-for="(item, k) in tot" :key="k" class="text item">
              <p>{{k}}</p>
              <p>{{item}}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>计价货币收益</span>
            </div>
            <div v-for="(item, k) in totalPl" :key="k" class="text item">
              <p>{{k.split('_')[3]}}</p>
              <p>{{item}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>

    <!--列表-->
    <el-table
      v-if="!totalVisible"
      :data="tableData"
      v-loading="tableDataLoading"
      style="width: 100%">
      <el-table-column
        prop="self_symbol"
        :label="$t('message.site-pairs')">
      </el-table-column>
      <el-table-column
        prop="symbol"
        :label="$t('message.hedge-pair')">
      </el-table-column>
      <el-table-column
        prop="type"
        :label="$t('message.type')">
        <template slot-scope="scope">
          <span>
            {{scope.row.type.split('-')[0] === 'buy' ? $t('message.buy') : (scope.row.type.split('-')[0] === 'sell' ? $t('message.sale') : '')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="base_pl_sum"
        :label="$t('message.base_pl')">
      </el-table-column>
      <el-table-column
        prop="pl"
        :label="$t('message.PL')">
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import { plCount, hedgingSiteList } from '../api/api'

export default {
  data () {
    return {
      date: '',
      siteList: [],
      site: '',
      coinType: [],
      value: '',
      tableData: [],
      pageSize: 1,
      tot: {},
      totalPl: {},
      totalVisible: false,
      tableDataLoading: false
    }
  },
  created () {
    hedgingSiteList().then((res) => {
      console.log(res)
      if (res.data.code && res.data.code !== 0) {
        this.$message.error(this.$t('message.tip-33'))
      }
      this.siteList = res.data.result
    }).catch((res) => {
      console.log(res)
    })
  },
  methods: {
    getData (site, startTime, endTime) {
      this.tableDataLoading = true
      let param = { site: site, startTime: startTime, endTime: endTime }
      plCount(param).then((res) => {
        if (res.data.code === 0) {
          this.tot = res.data.result_symbol_pl
          this.tableData = res.data.result_detail_pl
          this.totalPl.result_total_pl_btc = res.data.result_total_pl_btc
          this.totalPl.result_total_pl_eth = res.data.result_total_pl_eth
          this.totalPl.result_total_pl_usdt = res.data.result_total_pl_usdt
        } else {
          this.$message.error(this.$t('message.tip-34'))
        }
        this.tableDataLoading = false
      }).catch(() => {
        this.$message.error(this.$t('message.tip-34'))
        this.tableDataLoading = false
      })
    },
    commitData () {
      let date = this.date
      if (date === '') {
        this.$message.error(this.$t('message.tip-15'))
      } else {
        this.getData(this.site, date[0].getTime(), date[1].getTime())
      }
    },
    currentPage (page) {
      this.getData(this.value, page, this.date[0].getTime(), this.date[1].getTime())
    },
    change (t) {
      if (t < 10) {
        return '0' + t
      } else {
        return t
      }
    }
  },
  computed: {
    unit () {
      return this.value
    }
  },
  mounted () {

  }
}

</script>

<style scoped lang="scss">
  .pagination {
    overflow: hidden;
    margin-top: 20px;
    div {
      float: right;
      width: 400px;
    }
  }
 .item {
   display: flex;
   justify-content: space-between;
 }
  /*.totalPl {*/
    /*display: flex;*/
    /*padding: 0;*/
    /*justify-content: space-between;*/
    /*list-style-type: none;*/
    /*width: 100%;*/
    /*.item {*/
      /*display: flex;*/
      /*justify-content: space-between;*/
      /*width: 33.333%;*/
      /*p {*/
        /*&:first-child {*/
          /*width: 40%;*/
          /*background: #eef1f6;*/
        /*}*/
        /*&:last-child {*/
          /*width: 60%;*/
          /*background: #fff;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/
</style>
